<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item v-if="props.type === '修改'" label="触发器ID" prop="id">{{
      form.id
    }}</el-form-item>
    <el-form-item label="触发器名称" prop="triggerName">
      <el-input
        v-model="form.triggerName"
        placeholder="请输入触发器名称"
        :disabled="props.type === '修改'"
      />
    </el-form-item>
    <el-form-item label="触发器类型" prop="triggerType">
      <el-select v-model="form.triggerType" placeholder="请选择触发器类型">
        <el-option label="设备状态变化" value="device_status_change" />
        <el-option label="用户登录" value="user_login" />
        <el-option label="频道事件" value="channel_event" />
        <el-option label="定时触发" value="timed_trigger" />
      </el-select>
    </el-form-item>
    <el-form-item label="租户ID" prop="tenantId">
      <el-input
        v-model="form.tenantId"
        placeholder="请输入租户ID"
        type="number"
      />
    </el-form-item>
    <el-form-item label="租户名称" prop="tenantName">
      <el-input v-model="form.tenantName" placeholder="请输入租户名称" />
    </el-form-item>
    <el-form-item label="经销商ID" prop="dealerId">
      <el-input
        v-model="form.dealerId"
        placeholder="请输入经销商ID"
        type="number"
      />
    </el-form-item>
    <el-form-item label="经销商名称" prop="dealerName">
      <el-input v-model="form.dealerName" placeholder="请输入经销商名称" />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select v-model="form.status" placeholder="请选择状态">
        <el-option label="活跃" value="1" />
        <el-option label="停用" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 确定 </el-button>
      <el-button @click="formRef.value.resetFields()"> 重置 </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import type { FormItemProps } from "../utils/types";
import { http } from "@/utils/http";
import { changeHttpLink } from "@/utils/test";
import { message } from "@/utils/message";
import { ref } from "vue";

const props = defineProps<FormItemProps>();
const emit = defineEmits(["success"]);

const formRef = ref();
const form = ref<{
  id?: number;
  triggerName?: string;
  triggerType?: string;
  tenantId?: number;
  tenantName?: string;
  dealerId?: number;
  dealerName?: string;
  status?: number;
  [key: string]: any;
}>({});

// 表单规则
const rules = {
  triggerName: [
    {
      required: true,
      message: "请输入触发器名称",
      trigger: "blur"
    }
  ],
  triggerType: [
    {
      required: true,
      message: "请选择触发器类型",
      trigger: "change"
    }
  ],
  tenantId: [
    {
      required: true,
      message: "请输入租户ID",
      trigger: "blur"
    }
  ],
  dealerId: [
    {
      required: true,
      message: "请输入经销商ID",
      trigger: "blur"
    }
  ]
};

watch(
  () => props.form,
  val => {
    form.value = { ...val };
  },
  {
    immediate: true
  }
);

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const params = { ...form.value };

      http
        .post(changeHttpLink("/api/Trigger"), {
          data: params
        })
        .then((res: any) => {
          if (res.Success) {
            message(`${props.type}触发器成功`, { type: "success" });
            emit("success");
          } else {
            message(res.Message, { type: "error" });
          }
        })
        .catch(err => {
          message(err.message, { type: "error" });
        });
    }
  });
}
</script>
